<!-- 采购订单结算 -->
<template>
	<view class="p-b-140">
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="time-view">
			{{time}}
		</view>
		<view class="form-view">
			<view class="form-item">
				<view class="label">
					供应商
				</view>
				<view class="value">
					<text>散客</text>
				</view>
			</view>
			<view class="form-item" @click="toCategory()">
				<view class="label">
					类别
				</view>
				<view class="value category">
					<template  v-if="categoryName">
						<text style="flex: 1;">{{categoryName}}</text>
						<view class="close-view" @click.stop="onDel()">
							<u-icon name="close"></u-icon>
						</view>
					</template>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					类型
				</view>
				<view class="value">
					<u-radio-group
					    v-model="radiovalue"
					    placement="row"
					    @change="groupChange"
						size = "14"
					  >
					    <u-radio
					      :customStyle="{marginRight: '10px'}"
					      v-for="(item, index) in radiolist"
					      :key="index"
					      :label="item.label"
					      :name="item.value"
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					备注
				</view>
				<view class="value">
					<u--input
					    placeholder=""
					    border="none"
							v-model="bill.remarks"
					  ></u--input>
				</view>
			</view>
		</view>
		<!-- 已选择的产品列表 -->
		<c-list :listData="listData" @link="onLink"></c-list>
		<!-- 底部悬浮 -->
		<foot @save="onSaveFun" source="procureOrder" type="procure"></foot>
	</view>
</template>

<script>
	import {date} from '@/utils/util.js'
	import {listClothTypeOptions} from '@/apis/inventory/procure.js'
	import foot from '../components/footer.vue'
	import cList from '../components/list.vue'
	export default {
		name: '',
		components: {
			foot,
			cList
		},
		data() {
			return {
				listData: [],
				config: {
				  title: "采购订单",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  // rightButton: [
				  //   {
				  //     key: "btn1",
				  //     icon: "&#xe888;",
				  //     position: "left",
				  //   },
				  // ],
				},
				time: '',
				// 基本案列数据
				radiolist: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue: 0,
				// 类别名称
				categoryName: '',
			}
		},
		onShow() {
			// 获取选中的类别
			uni.$on('orderCategory',data=>{
				let {label, value} = data;
				this.categoryName = label;
				uni.$off('orderCategory')
			})
		},
		methods: {
			// 删除选中的类别
			onDel(val) {
				// let {label, value} = val;
				this.categoryName = ''
			},
			
			groupChange(n) {
			console.log('groupChange', n);
			},
			radioChange(n) {
			console.log('radioChange', n);
			},
			// 获取类型
			getListClothTypeOptions() {
				listClothTypeOptions().then(res=>{
					if(!res.flag) return;
					this.radiolist = res.data;
				})
			},
			// 保存采购订单
			onSaveFun() {
				uni.showToast({
					title: '不允许保存空单',
					icon: 'none'
				})
			},
			// 跳转类别
			toCategory() {
				uni.navigateTo({
					url: '/pages/application/pages/cloth/procure/category/index'
				})
			},
			// 跳转地址
			onLink(val) {
				
			}
		},
		mounted() {
			this.time = date('Y-m-d H:i:s',new Date());
			this.getListClothTypeOptions();
		}
	}
</script>

<style lang="scss" scoped>
	.time-view {
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		text-align: center;
		padding: 20rpx 0 40rpx;
		color: rgba(255,255,255,0.6);
	}
	.form-view {
		background: #fff;
		overflow: hidden;
		.form-item {
			display: flex;
			border-bottom: 1rpx solid #ddd;
			padding: 24rpx 40rpx;
			align-items: center;
			font-size: 30rpx;
			.label {
				color: #999;
				flex: 1;
				text-align: right;
				padding-right: 18rpx;
			}
			.close-view {
				// padding: 0 20rpx;
			}
			.value {
				flex: 6;
				display: flex;
			}
			.category {
				justify-content: space-between;
			}
		}
	}
</style>